﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<BadmintonBuddy.Models.Club>" %>
<%@ Import Namespace="BadmintonBuddy.Helpers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Submit a Club
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%= Html.RenderScript("../../Scripts/Map.js") %>        
    <script type="text/javascript">
        $(document).ready(function () {
            addWatermark();
            $('input:submit, input:button').button();
            $('a #locate').click(function () {
                loadLocation();
            });
            $('#Country').autocomplete({
                source: "GetCountry",
                minLength: 0
            });
            $('#State').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "GetState",
                        dataType: "json",
                        data: {
                            term: request.term,
                            country: $('#Country').val()
                        },
                        success: function (data) {
                            response(data);
                        }
                    });
                },
                minLength: 2
            });
            $('#City').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "GetCity",
                        dataType: "json",
                        data: {
                            term: request.term,
                            state: $('#State').val()
                        },
                        success: function (data) {
                            response(data);

                        }
                    });
                },
                minLength: 2
            });
            $('.mapoptions').dialog({
                autoOpen: false,
                show: 'blind',
                width: 600,
                height: 500,
                resizable: false,
                title: "Preview Club Location",
                buttons: { "Cancel": function () { $(this).dialog("close"); }, "Add": function (event, ui) { fillAddress(); $(this).dialog("close"); } }
            });
        });   
        
    </script>
    <div id="submitdiv">
        <div id="clubform">
            <% Html.EnableClientValidation(); %>
            <% using (Html.BeginForm())
               {%>
            <div class="basic">
                Basic Information</div>
            <div class="leftcol">
                <div class="editor-label">
                    <b class="req">*</b><%= Html.Label("Club Name")%>
                </div>
                <div class="editor-field">
                    <%= Html.TextBoxFor(model => model.ClubName, new { size = 50,@class="padding5"})%>
                    <%= Html.ValidationMessageFor(model => model.ClubName) %>
                </div>
                <div>
                    <div class="countryCol">
                        <div class="editor-label">
                            <%= Html.Label("Country") %>
                        </div>
                        <div class="editor-field">
                            <%= Html.TextBoxFor(model => model.City.State.Country.CountryName, new { size = 20, @class = "padding3", id = "Country"})%>
                            <%= Html.ValidationMessageFor(model => model.City.State.Country.CountryName) %>
                        </div>                        
                    </div>
                    <div class="stateCol">
                        <div class="editor-label">
                            <%= Html.Label("State") %>
                        </div>
                        <div class="editor-field">
                            <%= Html.TextBoxFor(model => model.City.State.StateName, new { size = 21, @class = "padding3", id = "State"})%>
                            <%= Html.ValidationMessageFor(model => model.City.State.StateName) %>
                        </div>
                    </div>
                </div>
                <div class="editor-label">
                    <%= Html.Label("City") %>
                </div>
                <div class="editor-field">
                    <%= Html.TextBoxFor(model => model.City.CityName, new { size = 50, @class = "padding5", id = "City"})%>
                    <%= Html.ValidationMessageFor(model => model.City.CityName) %>
                </div>
                <div class="editor-label">
                    <b class="req">*</b><%= Html.LabelFor(model => model.Address) %>
                </div>
                <div class="editor-field">
                    <%= Html.TextBoxFor(model => model.Address, new { size = 50, @class = "padding5"})%>                    
                    <%= Html.ValidationMessageFor(model => model.Address) %>
                </div>
                <div class="editor-label">
                    <%= Html.Label("CourtSurface") %>
                </div>
                <div class="editor-field">
                    <select name="Surface">
                        <option value="1">Wooden</option>
                        <option value="2">Syntetic</option>
                        <option value="3">Cement</option>
                        <option value="4">Cement with Mat</option>
                        <option value="5">Others</option>
                    </select>
                    <label id="lblSurface">
                        Please Specify</label>
                    <%= Html.TextBox("Others", "", new {display = "none" })%>
                </div>
                <div class="editor-label">
                    <%= Html.Label("Number of Courts") %>
                </div>
                <div class="editor-field">
                    <select name="Courts" class="courts">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="5">6</option>
                        <option value="5">7</option>
                        <option value="5">8</option>
                        <option value="5">9</option>
                        <option value="5">10</option>
                        <option value="5">11</option>
                        <option value="5">12</option>
                        <option value="5">13</option>
                        <option value="5">14</option>
                        <option value="5">15</option>
                        <option value="5">16</option>
                        <option value="5">17</option>
                        <option value="5">19</option>
                        <option value="5">20</option>
                    </select>
                </div>
                <div class="editor-label">
                    <%= Html.LabelFor(model => model.Fees)%>
                </div>
                <div class="editor-field">
                    <%= Html.TextBoxFor(model => model.Fees, new { size = 50, @class = "padding5"})%>
                    <%= Html.ValidationMessageFor(model => model.Fees) %>
                </div>
                <div class="additional">
                    <a href="javascript:moreDetails();">
                        <img src="../../Content/expnd.jpg" id="expnd" alt="additional" />
                        <img src="../../Content/coll.jpg" id="coll" alt="additional" />
                    </a>
                </div>
                <!--All optional would go in this collapsable UI-->
                <div id="optional">
                    <div class="leftcol">
                        <div class="editor-label">
                            <%= Html.LabelFor(model => model.PhoneNumber) %>
                        </div>
                        <div class="editor-field">
                            <%= Html.TextBoxFor(model => model.PhoneNumber, new { size = 50,@class="padding5"}) %>
                            <%= Html.ValidationMessageFor(model => model.PhoneNumber) %>
                        </div>
                        <div class="editor-label">
                            <%= Html.LabelFor(model => model.Timings) %>
                        </div>
                        <div class="editor-field">
                            <%= Html.TextBoxFor(model => model.Timings, new { size = 50,@class="padding5"}) %>
                            <%= Html.ValidationMessageFor(model => model.Timings) %>
                        </div>
                        <div class="editor-label">
                            <%= Html.LabelFor(model => model.Email) %><%=Html.Label("(") %><a href="javascript:showHelp();">
                                Why?</a><%=Html.Label(")") %>
                        </div>
                        <div class="editor-field">
                            <%= Html.TextBoxFor(model => model.Email, new { size = 50, @class = "padding5"})%>
                            <%= Html.ValidationMessageFor(model => model.Email) %>
                        </div>
                        <%=Html.CheckBox("Owner")%>I am the owner of the club.
                        <div class="editor-label">
                            <%= Html.LabelFor(model => model.Website) %>
                        </div>
                        <div class="editor-field">
                            <%= Html.TextBoxFor(model => model.Website, new { size = 50, @class = "padding5" })%>
                            <%= Html.ValidationMessageFor(model => model.Website) %>
                        </div>
                        <div class="editor-label">
                            <%= Html.Label("Other Facilities") %>
                        </div>
                        <div class="editor-field">
                            <%= Html.TextAreaFor(model => model.Description, new { cols = 40,rows = 5}) %>
                            <%= Html.ValidationMessageFor(model => model.Description) %>
                        </div>
                        <%: Html.HiddenFor(model=>model.Latitude) %>
                        <%: Html.HiddenFor(model=>model.Longitude) %>
                    </div>
                </div>
            </div>
            <div class="rightcol">
                <div id="mapDiv" class="mapCreate"></div>
                <!--div class="markerInfo"><a href="javascript:loadLocation();">Fix the incorrect marker/location on the map</a></div-->
            </div>
            <!--End of optional collapsable fields-->
            <div id="captcha" class="leftcol">                                
                <%= Html.Captcha("myCaptcha") %>
                <div>Please enter the above letters: <%= Html.TextBox("attempt","",new{@id="attempt"}) %></div>
                <div id="captchaerror" class="error dispn">
                    Sorry! Those aren't the correct letters. Please verify again.
                </div>
                <p>
                    <input type="button" id="create" value="Submit" onclick="javascript:addNewDetails('form0');" />
                </p>
            </div>
            
            <% } %>
        </div>
        <div class="mapoptions">
            <p>
                <b>Move marker(<img alt="marker" src="http://www.google.com/mapfiles/marker.png"
                    height="15" width="15" />)on the map to change the location.Click Add once done.</b></p>
            <div id="mapMarker" style="height: 350px">
            </div>
        </div>
        <div class="help dispn">
            <p>
                <b>Add club email contact so that users can contact if they need any more information.
                    <p>
                        If there is no e-mail address and you can add your e-mail address so that we can
                        contact you in case we need any more clarification about the information. We would
                        not use this information for any spams or service updates.</p>
                </b>
            </p>
        </div>
    </div>
</asp:Content>